{% extends "page.html" %}
{% load trix_translations i18n %}

{% load humanize %}

{% load trix_translations %}

{% block pagetitle %}{% translate "main_page_title" %}{% endblock %}

{% block head %}
	<link href='{% url graph "json" %}' rel='json' type='application/json'>
	<link href='{% url graph "xml" %}' rel='xml' type='application/xml'>
  <script type="text/javascript">
    /* a bit of a hack to do translations of category names in the
    graph. TODO: push translation of category names back into python/server
    side. */
    var category_descriptions = {
    {% for category in category_list %}
      {% with "category_"|add:category as category_id %}
      "{{ category_id }}":"{% translate category_id %}",
      {% endwith %}
    {% endfor %}
    }
    var loading_message = "{% translate "main_page_loading_message" %}";
  </script>
{% endblock %}

{% block content %}
{% get_language_info for LANGUAGE_CODE as lang %}

<div id="summary-text">{% translate "main_page_summary" %}</div>
	<div id="key">
	    <div class="keyitem">
        <div class="keytext">{% translate "main_page_key_supporter" %}</div>
        <img src="/static/img/Supporter.png" />
      </div>
			<div class="keyitem">
        <div class="keytext">{% translate "main_page_key_dead" %}</div>
			<img src="/static/img/Deceased.png" /></div>
      <div class="keyitem">
	      <div class="keytext">{% translate "main_page_key_defected" %}</div>
			  <img src="/static/img/Defected.png" /></div>
			<div class="keyitem">
				<div class="keytext">{% translate "main_page_defected_latest" %}</div>
			<img src="/static/img/Latest.png" /></div>
	</div>

<div id="graph-block">
  <div id="pillar-profile" class="hidden">
	
    <img id="pillar-profile-close-button{% if LANGUAGE_CODE = 'ar' %}-ar{% endif %}{% if LANGUAGE_CODE = 'en' %}-en{% endif %}"  src="/static/img/button_cancel.png" alt="close" onClick="close_profile()" />
    <div id="pillar-profile-content"></div>
  </div>
  <div id="graph">
    <div id="graph-loading-message">{% translate "main_page_loading_message" %}</div>
  </div>
</div>
	<div id="stats">
			<div id="main_page_chart">
				<h2 id="main_page_chart_header">{% translate "main_page_chart_header" %}</h2>
				<script type="text/javascript" src="https://www.google.com/jsapi"></script>
					<script type="text/javascript">
					google.load("visualization", "1", {packages:["corechart"]});
					google.setOnLoadCallback(drawChart);
					function drawChart() {
					var data = google.visualization.arrayToDataTable([
						['Month', 'Defections'],
						{% regroup defections by month as defections_bymonth %}
						{% for defection_month, defection_count in defection_months.items %}
							['{{ defection_month|date:"M Y" }}', {{ defection_count }}]{% if not forloop.last %},{% endif %}
						{% endfor %}
					]);

					var options = {'legend':'none', 'colors': ['#944'], vAxis: {format: '#'}}

					var chart = new google.visualization.AreaChart(document.getElementById('chart'));
					chart.draw(data, options);
				};
    			</script>
    			<div id="chart"></div>
			</div>
      <div id="main_page_counts">
        <h2 id="main_page_stats_header">{% translate "main_page_stats_header" %}</h2>
					{% for defection_category, defection_count in defection_categories.items %}
          <div class="defection-count">
            {% with "category_"|add:defection_category as category_id %}
						{% translate category_id %}: {{ defection_count }}<br>
            {% endwith %}
          </div>
					{% endfor %}

          <div id="disclaimer">{% translate "page_disclaimer" %}</div>
			</div>
		</div>
	  <div class="row" id="projectnote">
			<div class="span12">
			</div>
		</div>
	</div>
{% endblock %}
